<template>
<!--弹出窗测试-->
  <el-container>
    <el-header height="auto">
      <h1>弹出窗口测试</h1>
    </el-header>
    <el-main>
      <div>
        <span>使用自定义指令 dialog-drag 来进行弹窗的拖拽, 最大化, 还原和最小化</span>
        <el-button size="small" type="primary" @click="visible1 = true">测试1</el-button>
      </div>
      <div>
        <span>测试 拓展dialog的方式实现拖拽, 最大化, 最小化, 和还原的功能</span>
        <el-button size="small" type="danger" @click="visible2 = true">测试2</el-button>
      </div>
    </el-main>

    <el-dialog :visible.sync="visible1" title="使用自定义指令 dialog-drag" v-dialog-drag="{showFull: true, isDrag: true, isMini: true}"
               destroy-on-close append-to-body :close-on-click-modal="false" :close-on-press-escape="false" top="15vh" width="85%"></el-dialog>

    <el-dialog :visible.sync="visible2" title="使用拖拽组件的方式来完成" :minimizeAble="true" :fullscreenAble="true"
               destroy-on-close append-to-body :close-on-click-modal="false" :close-on-press-escape="false" top="15vh" width="85%"></el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "dialog",
  data() {
    return {
      visible1: false,
      visible2: false
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style lang="less" scoped>

</style>
